tips/UIPageViewController的使用.md at master · pro648/tips · GitHub

您所在的位置：网站首页 › uipageviewcontroller 重用 › tips/UIPageViewController的使用.md at master · pro648/tips · GitHub

tips/UIPageViewController的使用.md at master · pro648/tips · GitHub

2023-05-28 12:58| 来源: 网络整理| 查看: 265

UIPageViewController是一个用来管理内容页之间导航的容器控制器(container view controller)，其中每个子页面由子视图控制器管理。内容页间导航可以由用户手势触发，也可以由代码控制。在页面之间导航时，UIPageViewController使用其初始化时指定的transition style动画。

在应用程序启动时，我们可以使用UIPageViewController来实现引导图的效果，以告知用户app的基本功能。

这篇文章将讲述如何使用UIPageViewController，让用户在不同页面间滑动。

1. 创建demo

创建一个Simple View Application模板的工程，名称为PageViewController。创建两个继承自UIViewController的控制器，名称分别为RootViewController、DataViewController；另外创建一个名称为Model继承自NSObject的类。

Xcode提供了Page-Based App模板，其包含一个基于UIPageViewController的功能齐全的应用程序。但这个模板有点复杂，需要花更多时间来清理模版。除此之外，从头开始更易于理解UIPageViewController背后的概念。

demo完成后效果如下：

2. 页面布局

进入DataViewController.h文件，在接口部分添加以下属性：

@interface DataViewController : UIViewController @property (nonatomic, assign) NSUInteger itemIndex; @property (nonatomic, strong) NSString *day; @property (nonatomic, strong) NSString *quote; @end

进入DataViewController.m文件，声明两个UILabel用来显示页码和内容，同时使用懒加载初始化，并添加到view，如下：

@interface DataViewController () @property (nonatomic, strong) UILabel *dayLabel; @property (nonatomic, strong) UILabel *quoteLabel; @end #pragma mark - Getters & Setters - (UILabel *)dayLabel { if (!_dayLabel) { _dayLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, CGRectGetWidth(self.view.bounds), 20)]; _dayLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody]; _dayLabel.textAlignment = NSTextAlignmentCenter; } return _dayLabel; } - (UILabel *)quoteLabel { if (!_quoteLabel) { _quoteLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 50)]; _quoteLabel.frame = CGRectInset(_quoteLabel.frame, 16, 0); _quoteLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleTitle1]; _quoteLabel.textAlignment = NSTextAlignmentCenter; _quoteLabel.numberOfLines = 0; } return _quoteLabel; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [self.view addSubview:self.dayLabel]; [self.view addSubview:self.quoteLabel]; }

最后，在viewWillAppear:中将itemIndex、day和quote显示到UILabel：

- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; self.dayLabel.text = [NSString stringWithFormat:@"Page %lu %@",self.itemIndex + 1, [self.day description]]; self.quoteLabel.text = self.quote; } 3. UIPageViewControllerDataSource

为支持手势导航，必须为视图控制器提供data source，它会根据需要提供内容视图控制器，data source必须遵守UIPageViewControllerDataSource协议。

一般，UIPageViewControllerDataSource会根据传入的视图控制器来决定要显示的内容，以此创建所需的视图控制器。在视图控制器中添加诸如页码之类的信息很有帮助，可以简化确定显示内容的任务。

进入Model.h文件，声明Model类遵守UIPageViewControllerDataSource协议，并添加以下方法：

#import #import @class DataViewController; @interface Model : NSObject - (DataViewController *)viewControllerAtIndex:(NSUInteger)index; @end

进入Model.m文件，声明两个数组，用于每页显示的内容，如下：

@interface Model () @property (nonatomic, strong, readonly) NSArray *days; @property (nonatomic, strong, readonly) NSArray *quotes; @end

在初始化方法中，创建数据模型：

- (instancetype)init { self = [super init]; if (self) { // 创建数据模型。 NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init]; _days = [[dateFormatter weekdaySymbols] copy]; _quotes = @[@"Everyone who isn’t us is an enemy.", @"When you play the game of thrones you win or you die. There is no middle ground.", @"You’re a clever man. But you’re not half as clever as you think you are.", @"Nobody cares what your father once told you.", @"Everywhere in the world, they hurt little girls.", @"I choose violence.", @"What is Dead May Never Die" ]; } return self; }

实现接口部分声明的方法：

- (DataViewController *)viewControllerAtIndex:(NSUInteger)index { // 返回指定index的视图控制器。 if (self.days.count == 0 || index >= self.days.count) { return nil; } DataViewController *dataVC = [[DataViewController alloc] init]; dataVC.itemIndex = index; dataVC.day = self.days[index]; dataVC.quote = self.quotes[index]; return dataVC; }

UIPageViewControllerDataSource协议共有四个方法，其中pageViewController:viewControllerBeforeViewController:方法和pageViewController:viewControllerAfterViewController方法必须实现。

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController { // 返回上一个视图控制器。 NSUInteger index = ((DataViewController *)viewController).itemIndex; if (index == 0 || index == NSNotFound) { return nil; } --index; return [self viewControllerAtIndex:index]; } - (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController { // 返回下一个视图控制器。 NSUInteger index = ((DataViewController *)viewController).itemIndex; if (index == self.days.count - 1 || index == NSNotFound) { return nil; } ++index; return [self viewControllerAtIndex:index]; }

如果同时实现了presentationCountForPageViewController:和presentationIndexForPageViewController:可选实现协议方法，同时UIPageViewController的transition style被指定为UIPageViewControllerTransitionStyleScroll，navigationOrientation被指定为UIPageViewControllerNavigationOrientationHorizontal，则会在视图控制器底部显示page indicator。

// 初始页。 - (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController { NSUInteger currentPage = 2; if (currentPage >= self.days.count) { currentPage = 0; } DataViewController *dataVC = (DataViewController *)pageViewController.viewControllers.firstObject; dataVC.itemIndex = currentPage; dataVC.day = self.days[currentPage]; dataVC.quote = self.quotes[currentPage]; return currentPage; } // 共多少页。 - (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController { return self.days.count; }

如果默认显示第一页，则presentationIndexForPageViewController:方法可以直接返回0，而无需做其他操作。

在调用setViewControllers:direction:animated:completioin:方法后，会调用上面配置page control的方法。通过手势在页面间导航时，将不再调用上述方法，currentPage的index会被自动更新，视图控制器的数量应为常量。

4. 配置UIPageViewController

进入RootViewController.m文件，声明一个UIPageViewController类型的属性，另外声明一个Model类型的实例。

#import "RootViewController.h" #import "DataViewController.h" #import "Model.h" @interface RootViewController () @property (nonatomic, strong) UIPageViewController *pageViewController; @property (nonatomic, strong) Model *model; @end

记得导入DataViewController和Model类。

在viewDidLoad方法中配置UIPageViewController，更新后如下：

- (void)viewDidLoad { [super viewDidLoad]; // 初始化并配置pageViewController。 self.pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionInterPageSpacingKey : @20}]; DataViewController *dataVC = [self.model viewControllerAtIndex:0]; [self.pageViewController setViewControllers:@[dataVC] direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:nil]; // 设置代理。 self.pageViewController.dataSource = self.model; self.pageViewController.delegate = self; // 设置pageViewController inset。 CGRect pageViewRect = self.view.bounds; if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad) { pageViewRect = CGRectInset(pageViewRect, 40, 40); } self.pageViewController.view.frame = pageViewRect; // 添加视图控制器、视图。 [self addChildViewController:self.pageViewController]; [self.view addSubview:self.pageViewController.view]; [self.pageViewController didMoveToParentViewController:self]; // 设置page indicator颜色。 UIPageControl *pagecontrol = UIPageControl.appearance; pagecontrol.pageIndicatorTintColor = [UIColor lightGrayColor]; pagecontrol.currentPageIndicatorTintColor = [UIColor darkGrayColor]; } // 初始化model - (Model *)model { if (!_model) { _model = [[Model alloc] init]; } return _model; }

initWithTransitionStyle:navigationOrientation:options:方法用来初始化UIPageViewController，其参数如下：

transition style参数：可以为滚动样式UIPageViewControllerTransitionStyleScroll和翻页样式UIPageViewControllerTransitionPageCurl。

navigationOrientation：可以为横向UIPageViewControllerNavigationOrientationHorizontal和纵向UIPageViewControllerNavigationOrientationVertical。

options：该参数为词典。key为UIPageViewControllerOptionInterPageSpacingKey和UIPageViewControllerOptionSpineLocationKey。

Key为UIPageViewControllerOptionInterPageSpacingKey时，值应为封装在NSNumber中的CGFloat类型。默认值为0。只有在transition style为UIPageViewControllerTransitionStyleScroll时才会生效。

Key为UIPageViewControllerOptionSpineLocationKey时，值为以下枚举类型：

typedef enum UIPageViewControllerSpineLocation : NSInteger { UIPageViewControllerSpineLocationNone = 0, UIPageViewControllerSpineLocationMin = 1, UIPageViewControllerSpineLocationMid = 2, UIPageViewControllerSpineLocationMax = 3 } UIPageViewControllerSpineLocation;

当transition style为UIPageViewControllerTransitionPageCurl时，该值默认为UIPageViewControllerSpineLocationMin；否则，该值默认为UIPageViewControllerSpineLocationNone。另外，使用该值时应当将其封装在NSNumber对象中使用。

初始化UIPageViewController后，使用setViewControllers:direction:animated:completion:方法设置其内容视图。可以指定一次显示一个或两个视图控制器，其由spineLocation、doubleSided属性决定。动画结束后将显示传递给该方法的viewControllers。如果transition style为UIPageViewControllerTransitionStylePageCurl，传递给该方法的viewControllers将由spineLocation、doubleSided属性决定。

spineLocation doubleSided viewControllers参数 UIPageViewControllerSpineLocationMid YES 传入左侧和右侧需要显示的视图控制器 UIPageViewControllerSpineLocationMin或UIPageViewControllerSpineLocationMax YES 传入正面、背面两侧显示的视图控制器。

背面视图控制用于翻页动画

UIPageViewControllerSpineLocationMin或UIPageViewControllerSpineLocationMax NO 传入正面需要显示的视图控制器 5. UIPageViewControllerDelegate

UIPageViewController的委托必须遵守UIPageViewControllerDelegete协议，该协议中的方法允许委托在设备方向改变、用户导航到新页面时接收通知。对于page-curl style transition，可以在用户界面改变时提供不同的脊柱位置(spine location)。

在RootViewController.m文件中，添加两个NSUInteger类型的属性，分别用来保存当前页码、下一页码。

@interface RootViewController () ... @property (nonatomic, assign) NSUInteger currentIndex; @property (nonatomic, assign) NSUInteger nextIndex; @end

实现UIPageViewControllerDelegete的协议方法，在用户滑动时更新页面内容：

// 手势导航开始前调用该方法。 - (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray *)pendingViewControllers { // 如果用户终止了滑动导航，transition将不能完成，页面也将保持不变。 DataViewController *dataVC = (DataViewController *)pendingViewControllers.firstObject; if (dataVC) { self.nextIndex = dataVC.itemIndex; // 输出滑动方向 if (self.currentIndex < self.nextIndex) { NSLog(@"Forward"); } else { NSLog(@"Backward"); } } } // 手势导航结束后调用该方法。 - (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray *)previousViewControllers transitionCompleted:(BOOL)completed { // 使用completed参数区分成功导航和中止导航。 if (completed) { self.currentIndex = self.nextIndex; } }

运行demo，滑动上面视图或点击底部UIPageControl，如下所示：

虽然在初始化时指定了page间距，但上面的gif中并没有显示，这是因为RootViewController和DataViewController背景颜色一致所致，设置DataViewController视图背景颜色为brown color，再次运行demo：

更新RootViewController.m中的viewDidLoad方法，设置transition style为page curl：

- (void)viewDidLoad { ... // page curl self.pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionSpineLocationKey : @(UIPageViewControllerSpineLocationMin)}]; ... }

另外，实现UIPageViewControllerDelegate协议中的pageViewController: spineLocationForInterfaceOrientation:方法，根据设备状态调整spine location。

- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation { if (UIInterfaceOrientationIsPortrait(orientation) || ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)) { // 设备为phone，或portrait状态时，设置UIPageViewControllerSpineLocation为Min。 DataViewController *currentVC = self.pageViewController.viewControllers.firstObject; [self.pageViewController setViewControllers:@[currentVC] direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:nil]; self.pageViewController.doubleSided = NO; return UIPageViewControllerSpineLocationMin; } else { // 在landscape orientation时，设置spine为mid，pageViewController展示两个视图控制器。 DataViewController *currentVC = self.pageViewController.viewControllers.firstObject; NSUInteger indexOfCurrentVC = currentVC.itemIndex; NSArray *viewControllers = [NSArray array]; if (indexOfCurrentVC == 0 || indexOfCurrentVC % 2 == 0) { // 如果当前页为偶数，则显示当前页和下一页。 UIViewController *nextVC = [self.model pageViewController:self.pageViewController viewControllerAfterViewController:currentVC]; viewControllers = @[currentVC, nextVC]; } else { // 如果当前页为奇数，则显示上一页和当前页。 UIViewController *previousVC = [self.model pageViewController:self.pageViewController viewControllerBeforeViewController:currentVC]; viewControllers = @[previousVC, currentVC]; } [self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:nil]; return UIPageViewControllerSpineLocationMid; } }

运行demo，如下所示：

另外，UIPageViewControllerDelegate协议中还有pageViewControllerSupportedInterfaceOrientations:方法，用来指定支持的全部方向。pageViewControllerPreferredInterfaceOrientationForPresentation:方法返回页面视图控制器的首选呈现方向。

UIPageViewController类一般原样使用(used as-is)，但也可以继承。

Demo名称：PageViewController 源码地址：https://github.com/pro648/BasicDemos-iOS

参考资料：

UIPageViewController Get user swiping direction in UIPageViewController

【本文地址】

公司简介

联系我们